<template>
<div>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="查询条件">
      <el-input v-model="findForm.search" placeholder="请输入查询条件"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <el-button type="danger" @click="add">新增</el-button>
    </el-form-item>
  </el-form>

  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="id"
      label="资源ID"
      width="120">
    </el-table-column>
    <el-table-column
      prop="name"
      label="资源名称"
      width="140">
    </el-table-column>
    <el-table-column
      prop="url"
      width="180"
      label="访问路由">
    </el-table-column>
    <el-table-column
      prop="src"
      width="280"
      label="访问组件路径">
    </el-table-column>
    <el-table-column
      width="80"
      label="图标">
      <template slot-scope="scope">
        <i :class="scope.row.icon"></i>
      </template>
    </el-table-column>
    <el-table-column
      prop="parentId"
      width="100"
      label="父节点">
    </el-table-column>
    <el-table-column
      label="状态"
      width="100">
      <template slot-scope="scope">
        <el-switch
          v-model="scope.row.type === 1"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="handleChange(scope.row)"
        >
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      width="50">
      <template slot-scope="scope">
        <i @click="edit(scope.row.id)">编辑</i>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="findForm.size"
    @current-change="handleCurrentChange"
  >
  </el-pagination>

  <AddoreditMenuPermission ref="addoreditMenuPermission" @ok="handleOk"></AddoreditMenuPermission>
</div>
</template>

<script>
import {changeState, queryResourceByPage} from "@/api/resource";
import AddoreditMenuPermission from "@/components/resourceManagement/addoreditMenuPermission";

export default {
  name: "menuPermission",
  components: {AddoreditMenuPermission},
  data() {
    return {
      formInline: {},
      total: undefined,
      findForm: {
        search: undefined,
        page: 1,
        size: 10
      },
      tableData: [],
    }
  },
  created() {
    this.getAll()
  },
  methods: {
    onSubmit() {
      this.getAll()
    },
    add() {
      this.$refs.addoreditMenuPermission.add();
    },
    getAll() {
      queryResourceByPage(this.findForm).then(res=> {
        this.tableData = res.body.data.dtos
        this.total = res.body.data.total
      })
    },
    handleCurrentChange(page) {
      this.findForm.page = page
      this.getAll()
    },
    edit(id) {
      this.$refs.addoreditMenuPermission.edit(id);
    },
    handleChange(row) {
      changeState(row.id).then(res => {
        if (res.body.data) {
          if (row.type === 1)
            row.type = 0
          else
            row.type = 1
        }
      })
    },
    handleOk() {
      this.getAll()
    }
  }

}
</script>

<style scoped>

</style>
